<template>
    <a-drawer
        id="add_machine_drawer"
        width="60%"
        title="机房管理"
        placement="right"
        :visible="modal_show"
        @close="onCancle"
        :destroyOnClose="true"
        :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }"
        >
        <a-form :model="machine_room_value"  layout="vertical">
            <a-row :gutter="8">
                <a-col :span="2">
                    <a-form-item label="机房编号" class="my-form-item">
                        <a-input v-model:value="machine_room_value.jfbm" />
                    </a-form-item>
                </a-col>
                <a-col :span="3">
                    <a-form-item label="部门管理编号2" class="my-form-item">
                        <a-input v-model:value="machine_room_value.jfbm2" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="机房名称" class="my-form-item" >
                        <a-input v-model:value="machine_room_value.name"/>
                    </a-form-item>
                </a-col>
                <a-col :span="11">
                    <a-form-item label="座落" class="my-form-item">
                        <a-input v-model:value="machine_room_value.zl" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="8">
                <a-col :span="4">
                    <a-form-item label="管理部门" class="my-form-item">
                        <a-input v-model:value="machine_room_value.bm" />
                    </a-form-item>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="部门负责人"  class="my-form-item">
                        <a-input v-model:value="machine_room_value.bmfzr"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="部门具体实施人"  class="my-form-item">
                        <a-input v-model:value="machine_room_value.bmssr"/>
                    </a-form-item>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="部门联系人"  class="my-form-item">
                        <a-input v-model:value="machine_room_value.bmlxr"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="联系人电话"  class="my-form-item">
                        <a-input v-model:value="machine_room_value.bmlxrphone"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="8">
                <a-col :span="4">
                    <a-form-item label="机房性质"  class="my-form-item">
                        <a-select 
                            v-model:value="machine_room_value.xz"
                            style="width: 150px;"
                            :options="$store.state.machine_room_xz"
                            size="small"
                            :field-names="{ label: 'name', value: 'val' }"
                            />
                    </a-form-item>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="机房状态"  class="my-form-item">
                        <a-select 
                            v-model:value="machine_room_value.status"
                            style="width: 150px;"
                            :options="$store.state.machine_room_status"
                            size="small"
                            :field-names="{ label: 'name', value: 'val' }"
                            />
                    </a-form-item>
                </a-col>
                <a-col :span="4">
                    <a-form-item label="设备数量"  class="my-form-item">
                        <a-input v-model:value="machine_room_value.num" disabled/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="拓扑图"  class="my-form-item">
                        <a-row>
                            <a-col :span="15">
                                <a-input v-model:value="machine_room_value.ttt"/>
                            </a-col>
                            <a-col :span="1"></a-col>
                            <a-col :span="8">
                                <a-space>
                                    <a-button @click="click_add_ttt" style="margin: 0 auto;">添加拓扑图</a-button>
                                    <a-button @click="show_ttt" style="margin: 0 auto;">查看拓扑图</a-button>
                                </a-space>
                            </a-col>
                        </a-row>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="8">
                <a-col :span="6">
                    <a-form-item label="普查日期"  class="my-form-item">
                        <a-input v-model:value="machine_room_value.time"/>
                    </a-form-item>
                </a-col>
                <a-col :span="6">
                    <a-form-item label="等保需求"  class="my-form-item">
                        <a-input v-model:value="machine_room_value.dbxq"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item label="等保状态"  class="my-form-item">
                        <a-input v-model:value="machine_room_value.dbzt"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row :gutter="8">
                <a-col :span="24">
                    <a-form-item label="备注" class="my-form-item">
                        <a-textarea v-model:value="machine_room_value.bz" :rows="4" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <template #extra>
            <a-space>
                <a-button @click="onCancle">取消</a-button>
                <a-button type="primary" @click="onConfirm">确认</a-button>
            </a-space>
        </template>
    </a-drawer>
    <!-- 添加文件 -->
    <a-modal 
        class="my-modal short" 
        v-model:visible="add_file_modal_show" 
        title="添加拓扑图" 
        @ok="add_file_ok" 
        width="400px" 
        :maskClosable="false" 
        :centered="true"
        :destroyOnClose="true"
        >
        <!-- :maxCount="1" -->
            <a-upload-dragger
            v-model:fileList="fileList"
            name="file"
            :multiple="true"
            :action="upload_url"
            :before-upload="before_upload"
            @change="upload_change"
            :data="upload_data"
            
            >
                <p class="ant-upload-drag-icon">
                <inbox-outlined></inbox-outlined>
                </p>
                <p class="ant-upload-text">点击或拖动文件到此区域进行上传</p>
                <p class="ant-upload-hint">支持大部分文件</p>
            </a-upload-dragger>
        </a-modal>
</template>
<script>
export default {
    data() {
        return {
            modal_show: false,
            machine_room_value: {},



            upload_node:undefined,//上传时选中的group node
            add_file_modal_show:false, //显示上传控件
            fileList:[],//上传list
            upload_url:"",//上传url
            upload_data:{ //上传额外值
                name:"", //上传文件名
            },

        };
    },
    beforeUnmount() {
        this.$mitt.off('add_machine_rome_drawer');
    },
    mounted() {
        this.$mitt.on('add_machine_rome_drawer', _value => {
            this.machine_room_value=Object.assign({},_value)
            this.modal_show=true;
            console.log(_value)
        });
        this.upload_url=`${window.server_url}/pro_upload/upload`
    },
    methods: {
        onCancle(){
            this.modal_show=false
        },
        onConfirm(){
            this.$mitt.emit('add_machine_rome_drawer_result', this.machine_room_value);
            this.modal_show=false
        },
        click_add_ttt(){
            this.add_file_modal_show=true
            this.fileList=[]
        },
        async add_file_ok(){
            this.add_file_modal_show=false
        },
        before_upload(file, fileList){
            const isTypeOk = file.type === 'application/pdf' || file.type === 'image/png'|| file.type === 'image/jpeg';
            if (!isTypeOk) {
                this.$message.info('只支持pdf、png、jpeg!');
                return false
            }
            this.upload_data.name=file.name
            return true
        },
        upload_change(changes){
            if(changes?.file?.status=="done" && changes?.file?.response?.status==true){
                this.machine_room_value.ttt=changes?.file?.response?.file
                // console.log(this.machine_room_value.ttt)
            }
        },
        show_ttt(){
            if(this.machine_room_value.ttt){
                let _href = `${window.server_url}/change/show_ttt_file?file=${this.machine_room_value.ttt}`
                window.open(_href, '_blank');
            }
        },
    },
};
</script>
<style>
.my-form-item{
    margin-bottom: 6px;
}
</style>